<html>
<head>
    <title>Title</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
    <input id="addBtn" type="button" value="新增一级分类" class="layui-btn">
    <table id="table1"></table>
    <!-- 弹出窗口的模版 -->
    <script id="template1" type="text/html">
        <form class="layui-form" action="" lay-filter="form1">
            <div class="layui-form-item" style="margin-top:15px">
                <div class="layui-inline">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="id" class="layui-input"/>
                        <input type="hidden" id="parentId" name="parentId" class="layui-input"/>
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:15px">
                <div class="layui-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:15px">
                <div class="layui-inline">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sequence" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:15px">
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="0">正常</option>
                            <option value="1">禁用</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:15px">
                <div class="layui-inline">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="imgPath" name="img_path"/>
                        <img id="img1" width="60px" height="60px"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="reset" value="重置" class="layui-btn layui-btn-primary"/>
                    <input type="button" id="saveBtn" value="保存" class="layui-btn"/>
                </div>
            </div>
        </form>
    </script>
    <!-- 表格操作模版 -->
    <script id="template2" type="text/html">
        <input lay-event="add" type="button" class="layui-btn layui-btn-xs" value="加子分类"/>
        <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑"/>
        {{#  if(d.children==null || d.children.length==0){ }}
            <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除"/>
        {{#  }  }}
    </script>
    <script src="/lib/layui/layui.js"></script>
    <script src="/js/common.js"></script>

    <script th:inline="none">
        layui.use(["layer","form","treeTable","table"],function(){
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            var treeTable = layui.treeTable;
            var table = layui.table;

            var init = function (){
                treeTable.render({
                    elem:"#table1",
                    cols:[[
                        {title:"序号",type:"numbers"},
                        {title:"名称",field:"name",width:"30%",templet: function (d){
                            return "<i class='"+d.iconName+"'></i> "+d.name;
                            }},
                        {title:"操作",templet:"#template2",width:"20%"}
                    ]],
                    url:"/menu/tree",
                    tree:{
                        view:{
                            showIcon: false
                        }
                    }
                });
            }
            init();

            treeTable.on("tool",function(obj){
                if(obj.event === "delete"){
                    layer.confirm("您确定要删除这个分类吗？",function(){
                        $.post("/category/delete/"+obj.data.id,function(){
                            layer.closeAll();
                            init();
                        });
                    });
                }
                if(obj.event === "edit"){
                    $.get("/category/"+obj.data.id,function(c){
                        layer.open({
                            type:1,
                            title:"编辑分类",
                            area:["400px","400px"],
                            content:$("#template1").html()
                        });
                        form.val("form1",c);
                    });
                }

                if(obj.event === "add"){
                    layer.open({
                        type:1,
                        title:"新增子分类",
                        area:["400px","400px"],
                        content:$("#template1").html()
                    });
                    $("#parentId").val(obj.data.id);
                    form.render();
                }
            });


            //给新增菜单按钮绑定事件
            $("#addBtn").on("click",function(){
                layer.open({
                    type:1,
                    title:"新增一级菜单",
                    area:["400px","400px"],
                    content:$("#template1").html()
                });
                $("#parentId").val(0);
                form.render();
            });

            $("body").on("click","#saveBtn",function(){
                var data = form.val("form1");
                if(!data.name) {
                    layer.msg("分类名称不能为空！")
                    return false;
                }
                $.post("/category/save",data,function(){
                    layer.closeAll();
                    init();
                });
            });
        });
    </script>
</body>
</html>